<script lang="ts" setup>
import { ref, watch } from 'vue';

import { IconifyIcon } from '@vben/icons';

import { Button, Modal, TabPane, Tabs } from 'ant-design-vue';

import CapabilityBasicInfo from './CapabilityBasicInfo.vue';
import CapabilityBehaviorExecution from './CapabilityBehaviorExecution.vue';
import CapabilityEventSystem from './CapabilityEventSystem.vue';
import CapabilityImplementation from './CapabilityImplementation.vue';
import CapabilityPreconditions from './CapabilityPreconditions.vue';
import CapabilityStateMachine from './CapabilityStateMachine.vue';

// Props
const props = defineProps<{
  capability?: any;
  resource?: any;
  visible: boolean;
}>();

// Emits
const emit = defineEmits<{
  save: [capability: any];
  'update:visible': [value: boolean];
}>();

// 响应式数据
const activeTab = ref('basic');
const capability = ref<any>(null);

// 监听props变化
watch(
  () => props.capability,
  (newCapability) => {
    if (newCapability) {
      capability.value = { ...newCapability };
    }
  },
  { immediate: true },
);

// 监听visible变化
watch(
  () => props.visible,
  (newVisible) => {
    if (newVisible && props.capability) {
      capability.value = { ...props.capability };
    }
  },
);

// 方法
const handleBasicInfoUpdate = (data: any) => {
  capability.value = { ...capability.value, ...data };
};

const handleImplementationUpdate = (data: any) => {
  capability.value = { ...capability.value, ...data };
};

const handlePreconditionsUpdate = (data: any) => {
  capability.value = { ...capability.value, ...data };
};

const handleStateMachineUpdate = (data: any) => {
  capability.value = { ...capability.value, ...data };
};

const handleEventSystemUpdate = (data: any) => {
  capability.value = { ...capability.value, ...data };
};

const handleBehaviorExecutionUpdate = (data: any) => {
  capability.value = { ...capability.value, ...data };
};

const saveConfig = () => {
  emit('save', capability.value);
};

const closeModal = () => {
  emit('update:visible', false);
};
</script>

<template>
  <Modal
    :open="visible"
    title="能力配置"
    width="90vw"
    :footer="null"
    :destroy-on-close="true"
    style="top: 20px"
    @update:open="(val) => emit('update:visible', val)"
  >
    <div class="capability-config-modal">
      <!-- 顶部信息 -->
      <div class="config-header">
        <div class="capability-info">
          <IconifyIcon
            :icon="capability?.icon || 'ant-design:setting-outlined'"
          />
          <div class="info-details">
            <h3>{{ capability?.name || '新建能力' }}</h3>
            <p>
              {{ capability?.description || '配置能力的基本信息和实现方式' }}
            </p>
          </div>
        </div>
        <div class="header-actions">
          <Button @click="saveConfig" type="primary">
            <IconifyIcon icon="ant-design:save-outlined" />
            保存配置
          </Button>
          <Button @click="closeModal">
            <IconifyIcon icon="ant-design:close-outlined" />
            关闭
          </Button>
        </div>
      </div>

      <!-- 配置内容 -->
      <div class="config-content">
        <Tabs v-model:active-key="activeTab" type="card" size="large">
          <!-- 基本信息 -->
          <TabPane key="basic" tab="基本信息">
            <CapabilityBasicInfo
              v-model:capability="capability"
              @update="handleBasicInfoUpdate"
            />
          </TabPane>

          <!-- 实现配置 -->
          <TabPane key="implementation" tab="实现配置">
            <CapabilityImplementation
              v-model:capability="capability"
              @update="handleImplementationUpdate"
            />
          </TabPane>

          <!-- 前置约束 -->
          <TabPane key="preconditions" tab="前置约束">
            <CapabilityPreconditions
              v-model:capability="capability"
              @update="handlePreconditionsUpdate"
            />
          </TabPane>

          <!-- 状态机 -->
          <TabPane key="state-machine" tab="状态机">
            <CapabilityStateMachine
              v-model:capability="capability"
              @update="handleStateMachineUpdate"
            />
          </TabPane>

          <!-- 事件系统 -->
          <TabPane key="events" tab="事件系统">
            <CapabilityEventSystem
              v-model:capability="capability"
              @update="handleEventSystemUpdate"
            />
          </TabPane>

          <!-- 行为执行 -->
          <TabPane key="behavior" tab="行为执行">
            <CapabilityBehaviorExecution
              v-model:capability="capability"
              @update="handleBehaviorExecutionUpdate"
            />
          </TabPane>
        </Tabs>
      </div>
    </div>
  </Modal>
</template>

<style lang="less" scoped>
.capability-config-modal {
  .config-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 24px;

    .capability-info {
      display: flex;
      align-items: center;
      gap: 12px;

      .ant-design-icon {
        font-size: 32px;
        color: #1890ff;
      }

      .info-details {
        h3 {
          margin: 0 0 4px 0;
          color: #333;
        }

        p {
          margin: 0;
          color: #666;
        }
      }
    }

    .header-actions {
      display: flex;
      gap: 12px;
    }
  }

  .config-content {
    min-height: 600px;
  }
}
</style>
